<template>
  <el-container style="min-height: 100vh;">
    <!--  侧边栏    -->
    <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
    </el-aside>

    <el-container>
      <!--    头部    -->
      <el-header style="border-bottom: 1px solid #ccc;">
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
      </el-header>
      <!--    主体内容    -->
      <el-main>
        <!--    表示当前页面的子路由会在 <router-view /> 里面展示    -->
        <router-view @refreshUser="getUserInFo"/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
  name: 'Manage',
  data(){
    return {
      collapseBtnClass:'el-icon-s-fold', //按钮图标切换
      isCollapse:false,    //控制侧边收缩
      sideWidth:200,  //侧边宽度
      logoTextShow:true,  //后台管理文字隐藏
      //本地存储取值  三目判断
      user: {},
      userInfoId: {},
    }
  },
  components: {
    Aside,
    Header,
  },
  // created() {
  //   this.getUserInFo() //获取最新个人信息
  // },
  methods:{
    //侧边收缩
    collapse(){ //点击收缩按钮触发
      this.isCollapse = !this.isCollapse;
      if(this.isCollapse){ //收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      }else{  //展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    //查询最新学生个人信息
    getUserInFo(){
      if(localStorage.getItem("user")){
        this.user.userName = '昵称'
        if(null != JSON.parse(localStorage.getItem("user"))){
          this.userInfoId = JSON.parse(localStorage.getItem("user")).userId
        }
      }else {
        this.user.name = '昵称'
        this.userInfoId = {}
      }
      this.request.post(`/user/getTokenUser`, this.userInfoId).then(res => {
        if(res.code === '200'){
          //更新浏览器存储的用户信息
          // localStorage.setItem("user", JSON.stringify(res.data))
          this.user =  res.data
          this.user.name =  res.data.userName
          this.user.image =  res.data.avatarUrl
          // res.student = JSON.parse(localStorage.getItem("user")).token
        }
      })
    }
  },
}
</script>
